vue和react的路由懒加载 |
您所在的位置：网站首页 › vue 路由 懒加载 › vue和react的路由懒加载 |
vue和react的路由懒加载
|
懒加载用于解决首屏加载缓慢的问题 原理利用按需加载的思想，在第一次加载的过程中，只加载用户所看到的部分剩下的部分，加快了首屏加载的速度。其实不管是vue还是react,其路由懒加载的实现得益于wepack的异步模块打包，其原理就是利用es6 import()函数。这个import不是import命令。同样是引入模块，import命令是同步引入模块，而import()函数动态引入。当 Webpack 解析到该语法时，它会自动地开始进行代码分割(Code Splitting)，分割成一个文件，当使用到这个文件的时候会这段代码才会被异步加载。 const a = () => import('./testComponent')1.import() 符合ECMAScript提议的import()语法，该提案与普通 import 语句或 require 函数的类似，但返回一个 Promise 对象。这意味着模块时异步加载的 //import 命令 import { add } from './math'; console.log(add(16, 26)); //import函数 import("./math").then(math => { console.log(math.add(16, 26)); }); function component() { return import( /* webpackChunkName: "lodash" */ 'lodash').then(_ => { var element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; }).catch(error => 'An error occurred while loading the component'); } // 或者使用async async function getComponent() { var element = document.createElement('div'); const _ = await import(/* webpackChunkName: "lodash" */ 'lodash'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; }路由和组件的常用两种懒加载方式： 1、vue异步组件实现路由懒加载 component：resolve=>([‘需要加载的路由的地址’，resolve]) 2、es提出的import(推荐使用这种方式) const HelloWorld = （）=>import(‘需要加载的模块地址’) react懒加载: 如何使用React.lazy //OtherComponent.js 文件内容 import React from 'react' const OtherComponent = ()=>{ return ( 我已加载 ) } export default OtherComponent // App.js 文件内容 import React from 'react'; import './App.css'; //使用React.lazy导入OtherComponent组件 const OtherComponent = React.lazy(() => import('./OtherComponent')); function App() { return ( ); } export default App;这是最简单的React.lazy，但是这样页面会报错。这个报错提示我们，在React使用了lazy之后，会存在一个加载中的空档期，React不知道在这个空档期中该显示什么内容，所以需要我们指定。接下来就要使用到Suspense。 ** Suspense** 如果在 App 渲染完成后，包含 OtherComponent 的模块还没有被加载完成，我们可以使用加载指示器为此组件做优雅降级。这里我们使用 Suspense 组件来解决。 import React, { Suspense, Component } from 'react'; import './App.css'; //使用React.lazy导入OtherComponent组件 const OtherComponent = React.lazy(() => import('./OtherComponent')); export default class App extends Component { state = { visible: false } render() { return ( this.setState({ visible: true }) }}> 加载OtherComponent组件 this.state.visible ? : null } ) } }
|
【本文地址】
今日新闻 |
推荐新闻 |